<!-- 活动签到页 -->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">活动签到</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F5F5F5;">
			<!--图片区域-->
			<view class="r_img_box">
				<image :src="peImgUrl" class="r_img"></image>
			</view>
			<!--活动签到提醒区域-->
			<view class="r_box">
				<view class="r_box_row1"><span style="padding: 10rpx;"></span>活动签到</view>
				<view class="r_box_row2_textarea" style="margin-top: 10rpx;">
					<view class="r_box_row2_L"><image src="../../static/c_msg.png" style="width:40rpx;height:40rpx;"></view>
					<view class="r_box_row2_R_textarea">{{peName}}活动已经开始了！</view>
				</view>
				<view class="space_25"></view>
			</view>
			<!--活动已签到人姓名、电话信息区域-->
			<view v-if="playerStatus!='sign_up'" class="r_box">
				<view class="r_box_row1"><span style="padding: 10rpx;"></span>签到信息</view>
				<view class="r_box_row2" style="margin-top: 10rpx;">
					<view class="r_box_row2_L"><image src="../../static/c_name.png" style="width:40rpx;height:40rpx;"></view>
					<view class="r_box_row2_R">{{nickName}}</view>
				</view>
				<view class="r_box_row2" style="margin-top: 10rpx;">
					<view class="r_box_row2_L"><image src="../../static/c_phone.png" style="width:40rpx;height:40rpx;"></view>
					<view class="r_box_row2_R">{{phonenumber}}</view>
				</view>
				<view class="space_25"></view>
			</view>
			
			<!--在按钮上门加一个空行-->
			<view class="space_50"></view>
			<!--操作按钮-->
			<view v-if="playerStatus=='sign_up'" class="r_btn" @click="signIn()">签<span style="padding: 30rpx;"></span>到</view>
			<view v-else class="r_btn btn_notClick" style="margin-top: 10rpx;">已签到完毕</view>
			<view class="space_120"></view>
			
			<u-tabbar v-if="toolbarShow" :value="bottomTab" @change="name => bottomTab = name" activeColor="#1485FF">
				<u-tabbar-item text="首页" icon="home" @click="gotoIndex()"></u-tabbar-item>
				<u-tabbar-item text="活动列表" icon="list" @click="gotoActi()"></u-tabbar-item>
				<u-tabbar-item text="我的活动" icon="list-dot" @click="gotoMyActi()"></u-tabbar-item> 
			</u-tabbar>

		</view> 
		
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				bottomTab: undefined, //底部链接tabbar高亮控制
				isActiadmin:false, //是否是活动管理员（可以发起与参与活动），底部链接tabbar显示控制
				toolbarShow:false, //非注册用户不显示toolbar
				
				//页面传参
				playEventId:"", //活动id
				pePlayerId:"", //报名人id
				
				//页面元素
				peImgUrl:"", //缩略图
				peName:"", //活动名称
				playerStatus:"sign_up", //单一签到时，按钮图标控制变量 （之所以默认sign_up，是为了进入页面后，不显示报名人信息框）
				playEventScheduleList:[], //活动分段明细
				yiBaomingXinxi:[], //当前用户的已报名信息集合
				
				//新补充的
				nickName:"", //用于签到后显示当前的用户姓名与电话
				phonenumber:"", 
				
				//在此之上补充变量
			}
		},
		onLoad(option) {
			//以下是新加入的通过web二维码策略扫码进入签到页逻辑
			//1：先走一遍登录
			var that=this;
			wx.login({ //取code
			  //第一步：取code
				success:(res)=>{
					console.log(res);
					let code=res.code;
					let obj={};
					obj.code=code;
					obj.appid=getApp().globalData.appId;
					//进入第二步：在取到code的基础上调用本地接口获取openid（第二步中有包含第三步的调用，第三步中又包含第四步的调用）
					utils.getOpenId(obj).then(res => {
						console.log('获取活动签到页面的getOpenId接口返回值==',res); 
						if(res.data.code==200 && res.data.data.openid!=null){ //第二个条件是防止接口返回200，但openid为null
							let openid=res.data.data.openid;
							let unionid=res.data.data.unionid; //使用新逻辑
							//openid="oXVE244m2QMKrqQgxlgbszG1QqfE";//老孙的测试用
							getApp().globalData.openid=openid;
							getApp().globalData.unionid=unionid;
							console.log("***********获取的用户openid：",openid);
							console.log("***********获取的用户unionid：",unionid);
							//进入第三步：根据openid进行登陆
							//openid="aa";//测试一个非注册用户
							utils.loginByWX(unionid).then(res => {
								console.log('获取活动签到页面的loginByWX接口返回值==',res); 
								if(res.data.code==200){
									let access_token=res.data.data.access_token;//获取access_token并保存在全局变量中
									getApp().globalData.access_token=access_token;
									console.log('loginByWX接口token返回值==',access_token);
									console.log('全局变量中的token值==',getApp().globalData.access_token);
									let roles=res.data.data.roles;
									getApp().globalData.roles=roles;
									console.log('获取活动签到页面的loginByWX接口角色返回值==',roles); 
									console.log('全局变量中的roles值==',getApp().globalData.roles);
									//第四步：给全局变量中的角色布尔变量赋值
									if(roles.indexOf("技能培训管理员")!=-1){
										getApp().globalData.isSktradmin=true;
									}
									if(roles.indexOf("活动管理员")!=-1){
										getApp().globalData.isActiadmin=true;
									}
									if(roles.indexOf("检测评估管理员")!=-1){
										getApp().globalData.isDeevadmin=true;
									}
									if(roles.indexOf("检测评估执行员")!=-1){
										getApp().globalData.isDeevjob=true;
									}
									console.log('获取活动签到页面的全局变量中的角色值==',getApp().globalData.isSktradmin,getApp().globalData.isActiadmin,
									            getApp().globalData.isDeevadmin,getApp().globalData.isDeevjob,getApp().globalData.isMp_normal);
															
									//进入第四步：获取注册用户基本信息，并保存到全局变量中 
									utils.getUserInfo().then(res => {
										console.log('getUserInfo接口返回值==',res); 
										if(res.data.code==200){
											getApp().globalData.user=res.data.user;
											console.log('获取活动签到页面的全局变量中的user值==',getApp().globalData.user);
											
											//以下（新补充）在这里执行取参数与显示用户姓名与电话逻辑
											//2:取底部导航按钮权限（这个是原来就有的代码，只是位置变到这里）
											that.toolbarShow=true; //注册用户显示底部导航
											that.isActiadmin=getApp().globalData.isActiadmin;
											console.log("活动签到面用于底部显示控制的变量isActiadmin==",that.isActiadmin);
											//3：再取二维码中的参数
											var p=JSON.stringify(option);
											if(p!="{}"){
												if(option.hasOwnProperty('q') && option.q){
													//通过下面这步解码，可以拿到url的值
													var url=decodeURIComponent(option.q);
													// uni.$u.toast('二维码解析url=='+url);
													console.log("二维码解析url",url);
													//对url中携带的参数提取处理
													that.playEventId=url.split("=")[1];
													console.log("二维码中参数playEventId==",that.playEventId);
												}else{
													that.playEventId=option.playEventId;
													console.log("正常链接参数playEventId==",that.playEventId); 
												}
											}
											//通过that.playEventId调用我的活动列表，并比对集合中与that.playEventId对应的记录，再取得that.pePlayerId
											that.getPePlayerId(that.playEventId);
											//以上是新加入的通过web二维码策略扫码进入签到页逻辑
											//以下是新补充的显示签到信息的姓名与电话
											that.nickName=getApp().globalData.user.nickName;
											that.phonenumber=getApp().globalData.user.phonenumber;
											//以上（新补充）在这里执行取参数与显示用户姓名与电话逻辑
											
										}
										if(res.data.code==500){
											let msg=res.data.msg;
											uni.navigateTo({
												url:'../error/error?errorMsg='+msg 
											})
										}
									}).catch(error => {
										uni.navigateTo({
											url:'../error/error?errorMsg='+error
										})
									})
									
								}
								if(res.data.code==500){
									let msg=res.data.msg;
									//并且res.data.msg中有“不存在”3个字，跳转到注册页
									if(msg.indexOf("不存在")!=-1){
										getApp().globalData.actiDetailUrl="../acti/actiDetail?actiId="+that.playEventId;
										console.log("获取活动签到页面的非注册用户保存的url==",getApp().globalData.actiDetailUrl);
										uni.redirectTo({
											url:"../init/init" , 
										});
									}else if(msg.indexOf("对不起")!=-1){
										uni.showModal({
											title: '提示',
											content: '登录失败，该账号已被注销或删除！',
											showCancel: false ,
											confirmText: '关闭',
											success: res => {
												if (res.confirm) {
													wx.exitMiniProgram({
														success: function(){
															console.log("退出成功！！！"); 
														},
														fail: function(err){
															console.log("退出失败！！！",err);
															uni.navigateTo({
																url:'../error/error?errorMsg='+err.errMsg
															})
														}
													})
												}
											}
										})
										//uni.showModal结束
									}else{
										uni.navigateTo({
											url:'../error/error?errorMsg='+msg 
										})
									}
									
								}
							}).catch(error => {
								console.log("loginByWX捕获错误",error);
								uni.navigateTo({
									url:'../error/error?errorMsg='+error
								})
							})
						}
						if(res.data.code==500){
							let msg=res.data.msg;
							uni.navigateTo({
								url:'../error/error?errorMsg='+msg 
							})
						}
					}).catch(error => {
						uni.navigateTo({
							url:'../error/error?errorMsg='+error
						})
					})
				}
			})
		},
		methods: {
			//顶部导航回退箭头点击触发
			leftClick(){
				uni.navigateBack();
			},
			//（新补充的）根据playEventId获取对应活动条目中的pePlayerId
			getPePlayerId(playEventId){
				var that=this;
				//1：先获取我参与的活动列表
				var obj={
					pageSize:1000,  //每页1000条数据
					page:1,       //第几页
					peType:"play_event", //代表活动
				};
				utils.listMyActi(obj).then(res => {
					console.log('在签到页获取我参与的活动列表（过渡用）返回值==',res); 
					//debugger;
					if(res.data.code==200){
						var arr=res.data.rows;
						for(var i=0;i<arr.length;i++){
							if(arr[i].playEventId==playEventId){
								that.pePlayerId=arr[i].pePlayerId;
								break;
							}
						}
						console.log('在签到页通过比对取得的that.pePlayerId==',that.pePlayerId);
						that.getActiById(); //取到that.pePlayerId后再执行原先的逻辑
					}
					if(res.data.code==500){
						let msg=res.data.msg;
						uni.navigateTo({
							url:'../error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					console.log("捕获错误",error);
					uni.navigateTo({
						url:'../error/error?errorMsg='+error
					})
				})
			},
			
			//根据id获取活动的详细信息
			getActiById(){
				utils.getPlayEvent(this.playEventId).then(res => {
					console.log('获取活动明细的返回值==',res); 
					//debugger;
					if(res.data.code==200){
						let arr=res.data.data.playEventAppendixList;
						for(var i=0;i<arr.length;i++){
							if(arr[i].type=="0"){
								this.peImgUrl=arr[i].url;
								break;
							}
						}
						this.peName=res.data.data.peName;
						this.playerStatus=res.data.data.playerStatus;
						this.playEventScheduleList=res.data.data.playEventScheduleList;
						//在取到活动明细中的时间段后，再取当前用户的报名信息集合  
						this.getInfoByPePlayerId();
					}
					if(res.data.code==500){
						let msg=res.data.msg;
						uni.navigateTo({
							url:'../error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'../error/error?errorMsg='+error
					})
				})
			},
			//根据id获取活动的详细信息
			getInfoByPePlayerId(){
				var that=this;
				utils.getInfoByPePlayerId(this.pePlayerId).then(res => {
					console.log('查询当前用户的报名信息的返回值==',res); 
					//debugger;
					if(res.data.code==200){
						console.log("200");
						let strArr=res.data.data.peSchedule;
						if(strArr==null){
							this.yiBaomingXinxi=[];
						}else{
							this.yiBaomingXinxi=JSON.parse(strArr);
						}
						console.log("已报名信息：",this.yiBaomingXinxi);
						//在取到当前用户的报名信息后，执行比对操作
						this.compareArr();
					}
					if(res.data.code==500){
						let msg=res.data.msg;
						if(msg.indexOf("method")!=-1){
							// uni.navigateTo({
							// 	url:'../error/error?errorMsg=请先去扫码报名' 
							// })
							uni.redirectTo({
								url:"./actiDetail?actiId="+that.playEventId ,
							});
						}else{
							uni.navigateTo({
								url:'../error/error?errorMsg='+msg 
							})
						}
						
					}
				}).catch(error => {
					uni.navigateTo({
						url:'../error/error?errorMsg=##'+error
					})
				})
			},
			//比对2个对象集合，用于显示签到图标
			compareArr(){
				let arr1=this.playEventScheduleList; //时间段集合
				let arr2=this.yiBaomingXinxi; //当前用户已报名信息集合
				//debugger; 
				for(var i=0;i<arr1.length;i++){ //外循环是时间段集合
					let obj=arr1[i];
					let qiandao=false;
					for(var j=0;j<arr2.length;j++){
						if(arr2[j].peScheduleId==arr1[i].peScheduleId){
							qiandao=true;
							break;
						}
					}
					obj.qiandao=qiandao; //当时间段集合为空时确保这个值为true
				}
			},
			
			//签到（不含时间段的活动）
			signIn(){
				let obj={};
				//obj.playEventId=this.playEventId;
				obj.pePlayerId=this.pePlayerId;
				uni.showModal({
					title: '提示',
					content: '确定签到吗？',
					success: function(res) {
						if (res.confirm) {
							//执行确认后的操作
							utils.signIn(obj).then(res => {
								console.log('活动签到接口的返回值==',res); 
								//debugger;
								if(res.data.code==200){
									uni.navigateTo({
										url:"./myActi" ,
									});
								}
								if(res.data.code==500){
									let msg=res.data.msg;
									uni.navigateTo({
										url:'../error/error?errorMsg='+msg 
									})
								}
							}).catch(error => {
								uni.navigateTo({
									url:'../error/error?errorMsg='+error
								})
							})
						} 
						else {
							//执行取消后的操作
						}
					}
				})
				//uni.showModal结束
				
			},
			//签到（含时间段的活动）
			signInSchedule(peScheduleId){
				let obj={};
				obj.peScheduleId=peScheduleId;
				obj.pePlayerId=this.pePlayerId;
				uni.showModal({
					title: '提示',
					content: '确定本时段签到吗？', 
					success: function(res) {
						if (res.confirm) {
							//执行确认后的操作
							utils.signIn(obj).then(res => {
								console.log('活动签到接口的返回值==',res); 
								//debugger;
								if(res.data.code==200){
									uni.navigateTo({
										url:"./myActi" ,
									});
								}
								if(res.data.code==500){
									let msg=res.data.msg;
									uni.navigateTo({
										url:'../error/error?errorMsg='+msg 
									})
								}
							}).catch(error => {
								uni.navigateTo({
									url:'../error/error?errorMsg='+error
								})
							})
						} 
						else {
							//执行取消后的操作
						}
					}
				})
				//uni.showModal结束
				
			},
			
			gotoMyActi(){
				uni.navigateTo({
					url:"./myActi" ,
				});
			},
			gotoActi(){
				uni.navigateTo({
					url:"./acti" ,
				});
			},
			gotoMyActi_M() { //我创建的活动列表
				uni.navigateTo({
					url:"../acti_M/myActi_M" , 
				});
			},
			gotoIndex(){
				uni.navigateTo({
					url:"../init/init" , 
				});
			},
			//在此上方补充函数
		}
	}
</script>

<style lang="scss">
/*页面整体区域*/
.page_all{
	width: 750rpx;
	height: 100vh;
	background-color: #FFFFFF; /*背景颜色根据实际情况调整*/
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
/*title区域*/
.page_titleArea{ 
	width: 750rpx;
	height: 180rpx;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-shrink: 0; /*表示不可被压缩*/
	background-color: #1485FF;
}
.page_title_line{ /*用于放置返回按钮或是其他图标，title标题*/
	width: 750rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page_title_line_left{
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.page_title_line_middle{
	width: 550rpx;
	height: 100rpx;
	color: #fff;
	font-size: 32rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
}
.page_title_line_bigMiddle{
	width: 680rpx;
	height: 100rpx;
	color: #fff;
	font-size: 39rpx;
	line-height: 100rpx;
	text-align: left;
	font-family: MicrosoftYaHei;
	font-weight: bold;
}
/*content区域*/
.page_contentArea{
	width: 750rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	flex-grow: 1; /*表示占用title区域外的所有*/
	overflow-y: auto;
	/* border-bottom: 1rpx #AEAEAE solid; */ /*下边框样式*/
}

/*空行*/
.space_25{
	width:700rpx;
	height:25rpx;
	flex-shrink: 0; /*表示不可被压缩*/
}
.space_50{
	width:700rpx;
	height:50rpx;
	flex-shrink: 0; /*表示不可被压缩*/
}
.space_120{
	width:700rpx;
	height:120rpx;
	flex-shrink: 0; /*表示不可被压缩*/
}

/*内容块样式*/
.r_img_box{ /*首行图片*/
	width: 700rpx;
	height: 550rpx;  
	display: flex;
	justify-content: center;
	align-items: center;
	
	margin-top: 20rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.r_img{
	width: 700rpx;
	height: 550rpx; 
	border-radius: 15rpx;
}
.r_box{ 
	width: 700rpx;
	/* height: 600rpx; //由于项目描述有可能多行，因此这里不设固定高度 */ 
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	background-color: #ffffff;  
	border-radius: 15rpx;
	margin-top: 20rpx;
	flex-shrink: 0; /*不可被压缩*/
}
.r_box_row1{ /*活动名称*/
	width: 700rpx;
	min-height: 100rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #515151;
	font-size: 36rpx;
	line-height: 100rpx;
	text-align: left;
	font-family: MicrosoftYaHei;
	font-weight: 900;
	border-bottom: 2rpx #E1E1E1 dashed;
	margin-top: 10rpx;
}
.r_box_row2{ /* 普通的左右结构的行 */
	width: 700rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.r_box_row2_L{ /* 左侧标题 */
	width: 100rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.r_box_row2_R{ /* 右侧文字 */
	width: 600rpx;
	height: 60rpx;
	color: #515151;
	font-size: 32rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 60rpx;
}
.r_box_row2_textarea{ /* 右侧有折行的左右结构的行 */
	width: 700rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	min-height: 60rpx;
	color: #515151;
	font-size: 32rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 60rpx;
	margin-top: 10rpx;
}
.r_box_row2_R_textarea{ /* 有折行的右侧文字区 */
	width: 600rpx;
	min-height: 60rpx;
	color: #515151;
	font-size: 32rpx;  
	text-align: left;
	font-family: MicrosoftYaHei;
	line-height: 60rpx;
	/* flex-shrink: 0; *//*不可被压缩*/
}
.r_btn{
	width: 650rpx;
	height:100rpx; 
	background-color: #1485ff;
	color: #fff;
	border-radius: 50rpx;
	font-size: 38rpx;
	line-height: 100rpx;
	text-align: center;
	font-family: MicrosoftYaHei;
	font-weight: 900;
}
.btn_notClick{ /*按钮置灰*/
	filter: grayscale(1);
}
</style>
